import { Box, Flex, IconButton, Text } from '@chakra-ui/react';
import IAIInput from 'common/components/IAIInput';
import {
  ChangeEvent,
  ReactNode,
  useMemo,
  useState,
  useTransition,
} from 'react';
import { useTranslation } from 'react-i18next';
import { FiMenu } from 'react-icons/fi';
import Masonry from 'react-masonry-css';

import { useAppSelector } from 'app/store/storeHooks';

import TagDisplayItemCard from './TagDisplayItemCard';

const breakpointColumnsObj = {
  default: 5,
  1500: 4,
  1200: 3,
  500: 2,
};

const TagDisplayBox = (props: { subOnOpen: () => void }) => {
  const { t } = useTranslation();
  const { displayTags, currentSub } = useAppSelector((store) => store.tag);

  const [_, startTransition] = useTransition();
  const [searchText, setSearchText] = useState<string>('');
  const handleSearchFilter = (e: ChangeEvent<HTMLInputElement>) => {
    startTransition(() => {
      setSearchText(e.target.value);
    });
  };

  const renderTags = useMemo(() => {
    const filteredTagsToRender: ReactNode[] = [];
    const allTagsToRender: ReactNode[] = [];

    displayTags.forEach((t) => {
      allTagsToRender.push(<TagDisplayItemCard tag={t} key={t.key} />);
      if (
        t.key.toLowerCase().includes(searchText.toLowerCase()) ||
        t.zh.toLowerCase().includes(searchText.toLowerCase())
      ) {
        filteredTagsToRender.push(<TagDisplayItemCard tag={t} key={t.key} />);
      }
    });
    return searchText !== '' ? filteredTagsToRender : allTagsToRender;
  }, [displayTags, searchText]);

  return (
    <Flex
      gridArea="tags"
      direction="column"
      h={{ base: 'max-content', md: '100%' }}
      w="100%"
      p="2"
    >
      <Flex align="center">
        <IconButton
          aria-label="Menu"
          display={{ base: 'inline-flex', md: 'none' }}
          onClick={props.subOnOpen}
          icon={<FiMenu />}
          size="md"
          fontSize="xl"
        />
        <Text
          fontSize="1.5rem"
          pb="2"
          fontWeight="600"
          h="2rem"
          lineHeight="2rem"
        >
          {currentSub}
        </Text>
      </Flex>

      <IAIInput
        mt="1"
        size="sm"
        bg="base.950"
        _dark={{ bg: 'base.900' }}
        variant="filled"
        _hover={{
          bg: 'base.900',
        }}
        _focusVisible={{
          bg: 'base.900',
        }}
        placeholder={t('common.search')}
        onChange={handleSearchFilter}
      />

      <Box
        h="full"
        borderRadius="base"
        bg="base.950"
        _dark={{ bg: 'base.900' }}
        mt="1"
        pt="2"
        pb="1"
        px="1"
        overflowY="scroll"
        sx={{
          '.tag-masonry-grid': {
            width: 'auto',
            display: 'flex',
          },
          '.tag-masonry-grid_column': {
            backgroundClip: 'padding-box',
          },
        }}
      >
        <Masonry
          breakpointCols={breakpointColumnsObj}
          className="tag-masonry-grid"
          columnClassName="tag-masonry-grid_column"
        >
          {renderTags}
        </Masonry>
      </Box>

      {/* <Footer /> */}
    </Flex>
  );
};

export default TagDisplayBox;
